<template>
	<h2>pinia</h2>
	<div>
		这个是Dynamic1
	</div>
	<div v-for="item in lists">{{item.imageName}}</div>
	<hr />
	<div>
		<h2>使用pinia这个是父组件 </h2>
		<br /> {{uservalue}}=={{age}}==={{list}}=={{getage}}
		<button @click="change">修改</button>
	</div>
	<hr />
	<children1 />
</template>

<script setup>
	name: 'Dynamic1'
	import axios from '@/utils/axios.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		user
	} from '@/store/user.js'
	// let res = await axios.get('slider/getSliders')
	// let lists = res.data.data.list
	const store = user()
	let {
		uservalue,
		age,
		list,
		getage
	} = storeToRefs(store)

	function change() {
		let data = {
			number: 20,
			list: [{
				name: '小红',
				age: 22
			}],
			user: '异步修改'
		}
		store.changeNum(data)
		// uservalue.value='pinia的user已经被从父组件修改了'
	}
</script>

<style>
</style>
<!-- <template>
    <div>
            <div class="item"  v-for="(item, i) in drag.list"    :key="item.id"
                draggable="true"
                @dragstart="dragstart($event, i)"
                @dragenter="dragenter($event, i)"
                @dragend="dragend"
                @dragover="dragover"
               >
                {{ item.name }}
            </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
const drag = reactive({
	list: [
		{ name: 'a', id: 1 },
		{ name: 'b', id: 2 },
		{ name: 'c', id: 3 },
		{ name: 'd', id: 4 },
		{ name: 'e', id: 5 },
	]
})

let dragIndex = 0

function dragstart(e, index) {
	console.log(e,index ,'dragstart')
	e.stopPropagation()
	dragIndex = index
	setTimeout(() => {
		e.target.classList.add('moveing')
	},0)
}
function dragenter(e, index) {
	console.log(e,index ,'dragenter')
	e.preventDefault()
	// 拖拽到原位置时不触发
	if (dragIndex !== index) {
		const source = drag.list[dragIndex];
		drag.list.splice(dragIndex, 1);
		drag.list.splice(index, 0, source);

		// 更新节点位置
		dragIndex = index
	}
}
function dragover(e) {
	e.preventDefault()
	e.dataTransfer.dropEffect = 'move'
}
function dragend(e) {
	
	e.target.classList.remove('moveing')
}
</script>

<style lang="scss" scoped>
.item {
	width: 200px;
	height: 40px;
	line-height: 40px;
	// background-color: #f5f6f8;
	background-color: skyblue;
	text-align: center;
	margin: 10px;
	color: #fff;
	font-size: 18px;
}

// .container {
//   position: relative;
//   padding: 0;
// }

.moveing {
	opacity: 0;
}
</style> -->
